<template>
	<div class="app-container" v-loading="data.mtloading">

		<el-form :model="data.info" label-width="100px" class="w-1/2" ref="ruleFormRef">

			<el-form-item :label="$t('machine.custom.pushTitle') + ':'" prop="adv_title">
				<el-input v-model="data.info.adv_title" :placeholder="$t('message.pleaseEnter')" disabled />
			</el-form-item>

			<el-form-item :label="$t('advment.info.adMaterials') + ':'" prop="res_id">
				<el-select v-model="data.info.res_id" :placeholder="$t('message.pleaseSelect')" disabled>
					<el-option v-for="item in data.advlist" :key="item.res_id" :label="item.res_id + '-' + item.title"
						:value="item.res_id" />
				</el-select>
			</el-form-item>

			<el-form-item :label="$t('machine.custom.material') + ':'" prop="file_path">
				<div v-if="data.info.type == 1" class="flex justify-center">
					<el-image class="max-w-40 max-h-40" :src="data.info.file_path" fit="fill" />
				</div>
				<div v-if="data.info.type == 2" class="max-w-40">
					<Video :url="data.info.file_path" :control="false" />
				</div>
				<div v-if="data.info.type == 3" class="max-w-40">
					<audio :src="data.info.file_path" controls controlsList="nodownload" />
				</div>
			</el-form-item>

			<el-form-item :label="$t('machine.custom.screenPosition') + ':'" prop="screen">
				<el-select v-model="data.info.screen" :placeholder="$t('message.pleaseSelect')">
					<el-option :label="$t('machine.custom.home')" :value="1" />
					<el-option :label="$t('machine.custom.second')" :value="2" />
				</el-select>
			</el-form-item>

			<el-form-item :label="$t('machine.custom.advertisePosition') + ':'" prop="screen_full">
				<el-select v-model="data.info.screen_full" :placeholder="$t('message.pleaseSelect')" disabled>
					<el-option :label="$t('machine.custom.fullScreen')" :value="1" />
					<el-option :label="$t('machine.custom.homeAds')" :value="2" />
				</el-select>
			</el-form-item>

			<el-form-item :label="$t('machine.custom.placement') + ':'" prop="position">
				<el-select v-model="data.info.position" :placeholder="$t('message.pleaseSelect')" filterable disabled>
					<el-option v-for="item in data.advposition" :label="$t(item.label)" :value="item.value" />
				</el-select>
			</el-form-item>

			<el-form-item v-if="data.info.type == 1" :label="$t('advment.info.duration') + ':'" prop="duration_time">
				<el-input v-model="data.info.duration_time" :placeholder="$t('message.pleaseEnter')" />
			</el-form-item>

			<el-form-item :label="$t('advment.info.totalNum') + ':'" prop="total_times" v-if="data.info.type != 3">
				<el-input v-model="data.info.total_times" :placeholder="$t('message.pleaseEnter')" />
			</el-form-item>

			<el-form-item :label="$t('machine.code') + ':'" prop="m_id">
				<el-select v-model="data.info.m_id" :placeholder="$t('message.pleaseSelect')" disabled>
					<el-option v-for="item in data.maclist" :key="item.m_id"
						:label="item.m_id + ' - ' + item.machine_name + ' ( ' + item.machine_id + ' )'"
						:value="item.m_id" />
				</el-select>
			</el-form-item>

			<el-form-item :label="$t('date.releaseDate') + ':'" prop="timearr">
				<el-date-picker v-model="data.timearr" :disabled-date="disabledDate" type="daterange"
					:range-separator="$t('public.to')" :start-placeholder="$t('date.startDate')"
					:end-placeholder="$t('date.endDate')" value-format="YYYY-MM-DD" :shortcuts="shortcuts"
					:editable="false" :clearable="false" />
			</el-form-item>

			<el-form-item :label="$t('date.playTime')" prop="timelist">
				<el-time-picker v-model="data.timelist" is-range :range-separator="$t('public.to')"
					:start-placeholder="$t('date.startTimes')" :end-placeholder="$t('date.endTimes')"
					value-format='HH:mm:ss' :editable="false" :clearable="false" />
			</el-form-item>

			<div class="w-full text-center">
				<div class="inline-block">

					<el-button type="primary" size="small" @click="submit()">
						{{ $t('public.save') }}
					</el-button>

					<el-button size="small" @click="cancell">
						{{ $t('public.cancel') }}
					</el-button>

				</div>
			</div>

		</el-form>

	</div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
const { t: $t } = useI18n()
import getPlevel from '@/utils/level';
import { getresourceList, updatepush, getpushList } from '@/api/machine_custom';
import { getmachineList } from '@/api/machine';
import { useRouter, useRoute } from "vue-router";
const router = useRouter()
const route = useRoute()
let shortcuts = [
	{
		text: '最近七天',
		value: () => {
			const start = new Date();
			const end = new Date();

			start.setTime(start.getTime() + 3600 * 1000 * 24 * 7);
			return [end, start];
		}
	},
	{
		text: '最近三十天',
		value: () => {
			const start = new Date();
			const end = new Date();

			start.setTime(start.getTime() + 3600 * 1000 * 24 * 30);
			return [end, start];
		}
	},
	{
		text: '最近三个月',
		value: () => {
			const start = new Date();
			const end = new Date();
			start.setTime(start.getTime() + 3600 * 1000 * 24 * 90);
			return [end, start];
		}
	}
];

let data = reactive({
	mtloading: false, // 加载
	advlist: [], // 素材列表信息
	maclist: [], // 设备列表信息
	timearr: [], // 投放日期
	timelist: [], // 投放时间
	advposition: [], // 投放位置
	info: {}, // 主体信息
})
// 取消
let cancell = () => {
	getinfo()
	router.back()
}
// 获取信息
let getinfo = () => {
	let info = JSON.parse(decodeURI(route.query.l)).info
	let obj = {
		batch_num: info.batch_num
	}
	data.mtloading = true
	getpushList(obj).then(res => {
		data.mtloading = false
		if (res.state == 200) {
			data.info = res.data[0]
			data.timearr = [
				getPlevel.gettime(data.info.start_date, 1),
				getPlevel.gettime(data.info.end_date, 1)
			]
			data.timelist = [
				getPlevel.gettohms(data.info.start_time, 2),
				getPlevel.gettohms(data.info.end_time, 2)
			]
		}
	})
}

// 获取接口信息
let geturlinfo = () => {

	// 获取投放位置
	data.advposition = getPlevel.getadvpos(1)

	// 获取素材列表
	getresourceList().then(res => {
		if (res.state == 200) {
			data.advlist = res.data
		}
	})

	// 获取设备列表
	getmachineList().then(res => {
		if (res.state == 200) {
			data.maclist = res.data
		}
	})
}

// 日期选择
let disabledDate = (time: Date) => {
	return time.getTime() < Date.now() - 3600 * 1000 * 24 * 1
}

// 保存
let submit = () => {
	let obj = {
		adv_id: data.info.adv_id,
		duration_time: data.info.duration_time,
		total_times: data.info.total_times,
		start_date: data.timearr[0],
		end_date: data.timearr[1],
		start_time: data.timelist[0],
		end_time: data.timelist[1],
		screen: data.info.screen,
		screen_full: data.info.screen_full,
		position: data.info.position
	}

	updatepush(obj).then(res => {
		if (res.state == 200) {
			ElMessage({
				message: $t('message.pushSuccess'),
				type: 'success'
			});
			router.back()
			return;
		}
		ElMessage({
			message: $t('message.networkFailed'),
			type: 'error'
		});
	});



}

getinfo()
geturlinfo()

</script>
